<template>
  <el-dialog
    :title="title"
    :lock-scroll="false"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <el-row>
      <el-col>
        <el-form
          :model="exportForm"
          label-width="100px"
        >
          <el-form-item
            :label="$t('common.erp.export.filename')"
            prop="filename"
          >
            <el-input
              v-model="exportForm.filename"
              style="width: 172px;"
              clearable
            />
          </el-form-item>
          <el-form-item
            :label="$t('common.erp.export.type')"
            prop="type"
          >
            <el-select
              v-model="exportForm.type"
              :placeholder="$t('common.pleaseSelect') + $t('common.erp.export.type')"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('common.erp.export.code')"
            prop="code"
          >
            <el-select
              v-model="exportForm.code"
              :placeholder="$t('common.pleaseSelect') + $t('common.erp.export.code')"
            >
              <el-option
                v-for="item in codeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('common.erp.export.exportType')"
            prop="exportType"
          >
            <el-select
              v-model="exportForm.exportType"
              :placeholder="$t('common.pleaseSelect') + $t('common.erp.export.exportType')"
            >
              <el-option
                v-for="item in exportTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('common.erp.export.field')"
            prop="fields"
          >
            <el-select
              v-model="exportForm.fields"
              multiple
              :placeholder="$t('common.pleaseSelect') + $t('common.erp.export.field')"
            >
              <el-option
                v-for="item in fieldsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleExport"
            >
              {{ $t('common.erp.export.export') }}
            </el-button>
            <el-button @click="dialogVisible = false">
              {{ $t('common.close') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import Vue from 'vue';
import {Col, Form, FormItem, Row, Option, Select} from "element-ui";
import {cloneJson} from "../../../utils";

Vue.use(Form);
Vue.use(FormItem);
Vue.use(Row);
Vue.use(Col);
Vue.use(Select);
Vue.use(Option);
/**
 * 导出数据时的表单
 * @author maolin
 */
export default {
  name: "ExportForm",
  props: {
    /**
     * 需要导出的字段
     * @public
     */
    fields: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data () {
    return {
      exportForm: {
        filename: this.$route && this.$route.meta && this.$route.meta.title ? this.$route.meta.title : '',
        type: 'xlsx',
        code: 'UTF-8',
        exportType: 'all',
        fields: []
      },
      dialogVisible: false,
      title: this.$t('common.erp.export.export'),
      typeList: [
        {label: 'xlsx', value: 'xlsx'},
      ],
      codeList: [
        {label: 'UTF-8', value: 'UTF-8'},
      ],
      exportTypeList: [
        {label: this.$t('common.erp.export.allRecord'), value: 'all'},
        {label: this.$t('common.erp.export.selectedRecord'), value: 'selected'},
      ],
      fieldsList: []
    };
  },
  computed: {

  },
  mounted() {
    this.initFieldsList();
  },
  methods: {
    /**
     * 初始化字段列表
     * @private
     */
    initFieldsList () {
      let fields = this.fields;
      let data = [];
      let values = [];
      if(fields && fields.length > 0) {
        for(let i in fields) {
          if (fields[i].prop === '__operation') {
            continue;
          }
          if(fields[i].checked === undefined || fields[i].checked) {
            data.push({
              label: fields[i].label,
              value: fields[i].prop
            });
            values.push(fields[i].prop);
          }
        }
      }
      this.exportForm.fields = values;
      this.fieldsList = data;
    },
    /**
     * 点击导出
     * @private
     */
    handleExport () {
      let form = cloneJson(this.exportForm);
      /**
       * 通知父组件导出表格
       */
      this.$emit('export', form);
    }
  }
};
</script>

<style scoped>

</style>
